<template>
    <ContentBase>
        <div class="card">
            <div class="card-body">
                <div v-for="post in posts" :key="post.id">
                    <div class="card single-post">
                        <div class="card-body">
                            <div>{{post.posttime}}</div>
                            <img class="img-fluid" style="height: 10vh;border-radius: 50%;" :src="post.photo" >
                            {{ post.content }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ContentBase>
</template>

<script>
import ContentBase from '../components/ContentField';
import $ from 'jquery';
import { ref } from 'vue';
import { useStore } from 'vuex';
export default {

    name: 'UserSocial',
    components: {
        ContentBase,
    },
    setup() {
        let posts = ref([]);
        const store = useStore();

        $.ajax({
            url: 'http://127.0.0.1:3000/myspace/getpostall/',
            type: "get",
            headers: {
                Authorization: "Bearer " + store.state.user.token,
            },
            success(resp) {
                posts.value = resp;
                for(let i=0;i<posts.value.length;i++){
                    console.log("id="+posts.value[i].userId);

                    $.ajax({
                        url: "http://127.0.0.1:3000/myspace/getuser/",
                        type: "POST",
                        data: {
                        user_id: posts.value[i].userId,
                        },
                        headers: {
                        'Authorization': "Bearer " + store.state.user.token,
                        },
                        success(resp) {
                            posts.value[i].username = resp.username;
                            posts.value[i].photo = resp.photo;
                        }
                    });
                }

            }
        });


        return{
            posts
        }
    }


}

</script>


<style scoped>

</style>
